<template>
  <div>
    <div id="mapViews"></div>
    <map-tools @openTreeList="openTreeList" />
    <div id="containerSaber"></div>
    <tree-map v-if="treeState" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { loadModules } from 'esri-loader'
import mapTools from './mapTools.vue';
import treeMap from './components/treeMap.vue'
import { useStore } from "vuex";
const { commit, dispatch } = useStore();
let createMap = async () => {
  const that = this
  const option = {
    url: 'https://js.arcgis.com/4.28/init.js',
    css: 'https://js.arcgis.com/4.28/esri/themes/light/main.css'
  }
  // 属性查询--属性查询--queryTask
  // 空间查询--FeatureLayer(createQuery)
  // 自定义弹窗--FeatureLayer(popupTemplate)
  // 点击----view.on('click',()=>)
  // Basemap--底图
  // 切片图层-----用TieLayer加载，地址是MapServer结尾的
  // 影像切片图层------用ImageryTieLayer加载，地址是ImageServer结尾的
  // 动态地图服务-----用MapImageLayer加载，MapServer配合ID使用
  // 影像图层-----用ImageLayer加载，https://landsat2.arcgis.com/arcgis/rest/services/Landsat8_Views/ImageServer
  // 编辑数据的图层-----FeatureLayer加载， 地址是FeatureServer结尾的
  // 开源的服务jsserver-----WFSLayer WMSLayer WMTLayer
  // BasemapToggle-----底图切换
  const [Map, MapView, Basemap, TileLayer, BasemapToggle, ScaleBar, Zoom] = await loadModules([
    "esri/Map",
    "esri/views/MapView",
    "esri/Basemap",
    "esri/layers/TileLayer",
    'esri/widgets/BasemapToggle',
    "esri/widgets/ScaleBar",
    "esri/widgets/Zoom"],
    option)
  // 自定义图层
  const basemap = new Basemap({
    baseLayers: [
      new TileLayer({
        url: "https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer",
        title: "Basemap"
      })
    ],
    title: "basemap",
    id: "basemap"
  });
  const map = new Map({
    basemap // basemap:basemap键值相同时，可以简写成basemap
  });
  const mapview = new MapView({
    container: "mapViews",
    map: map,
    zoom: 12, // 默认放大多少倍
    center: [104.95, 37.13] // 中心点
  });
  commit("createMap", mapview); // 调用文件里的createMap方法（mutations）
  dispatch('increment', 1)// 调用文件里的increment方法（actions）
    console.log(mapview.map,'viewMap1111111111111111111111')


  // 底图切换控件
  let basemapToggle = new BasemapToggle({
    view: mapview,
    nextBasemap: "hybrid"
  });
  mapview.ui.add(basemapToggle, {
    position: "top-left" // 底图控件位置  如果需要自定义位置的话 则用到container  官网搜索api
  });

  // 比例尺
  let scaleBar = new ScaleBar({
    view: mapview,
    unit: 'metric', // 比例尺的单位
    container: 'containerSaber' // 自定义比例尺
  });
  mapview.ui.add(scaleBar);

  // 缩放控件
  let zoom = new Zoom({
    view: mapview,
    container: "viewZoom",
  });
  mapview.ui.add(zoom, {
    position: "top-left" // 底图控件位置  如果需要自定义位置的话 则用到container  官网搜索api
  });

  // 清除地图上的一些提示
  mapview.ui.components = []
}
createMap() // 创建地图

// 打开树组件
let treeState = ref(false)
let openTreeList =()=> {
  treeState.value = !treeState.value
}
</script>

<style lang="scss" scoped>
#mapViews {
  width: 100%;
  height: 100vh;
}
#containerSaber {
  position: absolute;
  bottom: 10px;
  left: 10px;
}
</style>